<template>
  <a-modal
    title="学生选课详情"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleCancel"
    @cancel="handleCancel"
    :footer="null"
  >
    <div>
      <a-card :bordered="false" :bodyStyle="tstyle">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="6" :sm="24">
                <a-form-item label="学生标签">
                  <a-select show-search allowClear placeholder="请选择学生标签" v-model="queryParam.tagId">
                    <a-select-option v-for="item of tagList" :key="item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="学生姓名/学号">
                  <a-input v-model="queryParam.keyword" allow-clear placeholder="请输入学生姓名/学号"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="选课校验">
                  <a-select show-search allowClear placeholder="请选择选课校验" v-model="queryParam.checkResult">
                    <a-select-option value="1">合格</a-select-option>
                    <a-select-option value="0">不合格</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="getData">查询</a-button>
                  <x-down ref="batchExport" @batchExport="exportCsDetail"/>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
      <a-card :bordered="false">
        <a-table
          bordered
          ref="table"
          :columns="columns"
          :dataSource="loadData"
          :loading="tableLoading"
          :pagination="false"
          :rowKey="(record) => record.studentId"
        >
          <span slot="checkResult" slot-scope="text, record">
            <a-tag color='red' v-if="record.checkResult===0">
              不合格
            </a-tag>
            <a-tag color='green' v-if="record.checkResult===1">
              合格
            </a-tag>
          </span>
        </a-table>
      </a-card>
    </div>
  </a-modal>

</template>

<script>
  import { tStudentTagList } from '@/api/modular/system/studentTagManage'
  import { exportCourseSelectionDetailList, getCourseSelectionDetailList } from '@/api/modular/system/courseSelectionManage'
  import { XDown } from '@/components'

  export default {
    components: {
      XDown
    },
    data() {
      return {
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
        visible: false,
        confirmLoading: false,
        // 查询参数
        queryParam: {
          tagId: undefined,
          keyword: undefined,
          checkResult: undefined
        },
        coursePublishId: '',
        tagList: [],
        columns: [
          {
            title: '学生姓名',
            dataIndex: 'studentName'
          },
          {
            title: '学号',
            dataIndex: 'userNum'
          },
          {
            title: '学生标签',
            dataIndex: 'tagNames'
          },
          {
            title: '选课数量',
            dataIndex: 'csNum'
          },
          {
            title: '选课内容',
            dataIndex: 'projectNames'
          },
          {
            title: '选课校验',
            dataIndex: 'checkResult',
            scopedSlots: { customRender: 'checkResult' }
          }
        ],
        loadData: '',
        tableLoading: false
      }
    },
    methods: {
      getTagList() {
        tStudentTagList().then((res) => {
          if (res.success) {
            this.tagList = res.data
          }
        })
      },
      handleCancel() {
        this.visible = false
      },
      open(id) {
        this.visible = true
        this.coursePublishId = id
        this.getTagList()
        this.getData()
      },
      getData() {
        this.tableLoading = true
        getCourseSelectionDetailList({
          coursePublishId: this.coursePublishId,
          ...this.queryParam
        }).then((res) => {
          if (res.success) {
            this.loadData = res.data
          }
        }).finally(() => {
          this.tableLoading = false
        })
      },
      exportCsDetail() {
        exportCourseSelectionDetailList({
            coursePublishId: this.coursePublishId,
            ...this.queryParam
          }
        ).then((res) => {
          this.$refs.batchExport.downloadfile(res)
        })
      }
    }
  }
</script>